<template>
	<div id="song-list-detail">
	  <!-- 顶部歌单描述 -->
	  <Topdesc :playlist="playlist" :is-sub="isSub" @playAllSong="playAllSong" @subSongListBy="subSongListBy" />
	  <!-- 底部歌曲 -->
	  <div class="bot-song-list" v-if="Object.keys(playlist).length!== 0">
		<el-tabs>
		  <!-- 歌曲列表 -->
		  <el-tab-pane label="歌曲">
			<SongTable :songs="songs" @updateSonglist="updateSonglist" />
		  </el-tab-pane>
		  <!-- 评论 -->
		  <el-tab-pane label="评论">
				<CommentPage :comment-type="2" :commentres-id="id" @changePage="changePage" />
		  </el-tab-pane>
		  <!-- 收藏者 -->
		  <el-tab-pane label="收藏者">
			<Subscribers :subscribers="subscribers" :totalcount="totalcount" @handlePage="getSongListSubscribersBy" />
		  </el-tab-pane>
		</el-tabs>
	  </div>
	</div>
  </template>
  
<script setup>
import { ref, inject, onMounted, onUpdated, watch ,computed} from 'vue';
/* 网络请求模块*/
  import { getSongListDetail, getEverySongDetail, getSongListSubscribers, subSongList } from '../../network/songlistdetail/songlistdetail.js';
  import { getSongUrl } from '../../network/playmusic/playmusic.js';
  import { getUserSonglist } from '../../network/userdetail/userdetail.js';
  import {  } from 'vue';
  import { mapGetters } from "vuex";
/* 子组件 */
  import Topdesc from './Childcomps/Topdesc.vue';
  import SongTable from '../../components/content/SongTable.vue';
  import Subscribers from './Childcomps/Subscribers.vue';
  import CommentPage from "@/components/content/comment/commentPage.vue";
  import { useRoute } from 'vue-router';
  import { useStore } from 'vuex';

const reload = inject('reload');
const store = useStore();
const route = useRoute();

const id = ref(''); //存储路由传递过来歌单id
const playlist = ref({});  //歌单描述信息
const songids = ref(""); //歌单中所有歌曲id
const songs = ref([]); //歌单中所有歌曲详细信息
const subscribers = ref([]); // 收藏者
const totalcount = ref(0); // 收藏者总数
const isSub = ref(false); // 是否收藏歌单

onMounted(async()=> {
	id.value =  route.params.id;  ;  // 保存路由传递过来歌单 id	
	 getSongListDetailBy();  // 根据歌单 id 请求对应的歌单详情数据
	 getSongListSubscribersBy();  // 获取歌单收藏者
	 isSubSongList();    // 判断用户是否收藏了该歌单
  });

// **计算属性**
const userSongList = computed(() => store.getters.userSongList);
const userInfo = computed(() => store.getters.userInfo);

// 分页跳转操作
const changePage = () => {
  // 使用 scrollTo 方法滚动到指定位置
  if (view.value) {
    view.value.scrollTo({
      top: 300,  // 指定滚动的位置
      behavior: 'smooth'  // 可以添加平滑滚动效果
    });
  }
};
// 获取歌单详情
const getSongListDetailBy = async () => {
	songids.value = ""; // 重置 songids
	const res = await getSongListDetail(id.value);
	playlist.value = res.data.playlist;

	// 拼接歌曲 ID 字符串
	const trackIds = playlist.value.trackIds || [];
	const limitedIds = trackIds.length > 1000 ? trackIds.slice(0, 500) : trackIds;
	songids.value = limitedIds.map(item => item.id).join(",");

	// 获取每首歌的详细信息
	if (songids.value) {
		const songRes = await getEverySongDetail(songids.value);
		if (songRes.data.code === 200) {
			songs.value = songRes.data.songs;
		}
	}
};

const getSongListSubscribersBy = async (page = 1) => {
	const offset = (page - 1) * 48;
	const res = await getSongListSubscribers(id.value, offset);
	subscribers.value = res.data.subscribers;
	totalcount.value = res.data.total;
};

const isSubSongList = () => {
	isSub.value = userSongList.value.some(item => item.id == id.value);
};

const subSongListBy = async () => {
	const t = isSub.value ? 2 : 1; // 1 收藏，2 取消收藏
	try {
		const res = await subSongList(t, id.value);
		if (res.data.code === 200) {
			isSub.value = !isSub.value;
			const userSonglistRes = await getUserSonglist(userInfo.value.userId);
			store.dispatch("saveUserSongList", userSonglistRes.data.playlist);
		}
	} catch {
		console.warn("操作失败, 请重试");
	}
};

const playAllSong = async () => {
	store.dispatch("addAllSong", songs.value);
	if (songs.value.length > 0) {
		const res = await getSongUrl(songs.value[0].id);
		store.dispatch("saveSongUrl", res.data.data[0].url);
		store.dispatch("changePlayState", true);
		store.dispatch("saveSongDetail", songs.value[0]);
	}
};

const updateSonglist = () => {
	getSongListDetailBy();
};



// **监听路由变化**
watch(() => route.params.id, newId => {
	id.value = newId;
	getSongListDetailBy();
	getSongListSubscribersBy();
	isSubSongList();
});


  </script>
  
  <style lang="less" scoped></style>